<template>
<!--  <div>-->
<!--    <h2>{{itemData.title}}</h2>-->
<!--    <web-three :id="4"></web-three>-->
<!--  </div>-->
  <layout>
    <div class="container" id="myContainer"></div>
  </layout>
</template>

<script>
import {computed, defineComponent, onMounted, ref} from "vue";
import * as THREE from 'three';
import {useRouter, useRoute} from 'vue-router'
import WebThree from "../../../components/WebThree.vue";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
export default defineComponent({
  name: "Lines",
  components: {
    WebThree
  },
  setup() {
    onMounted(() => {
      initData()
    })
    const route = useRoute()
    const itemData = computed(() => JSON.parse(route.query.itemData))
    const initData = () => {
      let width = window.innerWidth;
      let height = window.innerHeight;
      let camera = new THREE.PerspectiveCamera(45, width/height, 1, 500)
      camera.position.set(0,0,100)
      camera.lookAt(0,0,0)

      let scene = new THREE.Scene()

      let renderer = new THREE.WebGLRenderer()
      renderer.setSize(width, height)
      renderer.setClearColor(0xff1299, 0.1) //设置背景颜色
      document.body.appendChild(renderer.domElement)

      // let geometry = new THREE.Geometry()
      // geometry.vertices.push(new THREE.Vector3(-10, 0, 0))
      // geometry.vertices.push(new THREE.Vector3(0, 10, 0))
      // geometry.vertices.push(new THREE.Vector3(10, 0, 0))

      let geometry = new THREE.BufferGeometry();
      var vertices = new Float32Array([
        0, 0, 0, //顶点1坐标
        50, 0, 0, //顶点2坐标
        0, 100, 0, //顶点3坐标

        0, 0, 10, //顶点4坐标
        0, 0, 100, //顶点5坐标
        50, 0, 10, //顶点6坐标
      ]);

      var attribue = new THREE.BufferAttribute(vertices, 3);
      geometry.attributes.position = attribue;
      var colors = new Float32Array([
        1, 0, 9, //顶点1颜色
        0, 1, 0, //顶点2颜色
        0, 0, 1, //顶点3颜色

        1, 1, 0, //顶点4颜色
        0, 1, 1, //顶点5颜色
        1, 0, 1, //顶点6颜色
      ]);
      geometry.attributes.color = new THREE.BufferAttribute(colors, 3);

      let material = new THREE.LineBasicMaterial( {
        color: 0x55ff99
      });
      let line = new THREE.Line(geometry, material)

      scene.add(line)
      renderer.render(scene, camera)
      let controls = new OrbitControls(camera, renderer.domElement)//创建控件对象
      controls.addEventListener('change',() => {
        renderer.render(scene, camera)
        // mesh.rotateY(0.01);
      })
    }
    return {
      itemData
    }
  }
})
</script>

<style scoped>

</style>